<template>
    <h3>开关</h3>
    <h4>普通开关</h4>
    <div class="c-p-v-m" v-for="size in sizes" :key="size">
        <a-input-switch
            class="c-m-h-s"
            v-for="color in colors"
            :color="color"
            :key="color"
            :size="size"
            v-model:value="checked"
        ></a-input-switch>
    </div>
    <h4>禁用的开关</h4>
    <div class="c-p-v-m">
        <a-input-switch
            class="c-m-h-s"
            v-for="color in colors"
            :color="color"
            :key="color"
            :disabled="true"
            v-model:value="checked"
        ></a-input-switch>
    </div>
</template>

<script>
export default {
    data() {
        return {
            colors: [
                'default',
                'primary',
                'secondary',
                'success',
                'warning',
                'error',
            ],
            sizes: ['xs', 's', 'm', 'l', 'xl'],
            name: 'zhang',
            age: 1,
            password: '',
            checked: false,
            fav: null,
            favs: [],
            favItems: [
                { text: '香蕉', value: 1 },
                { text: '苹果', value: 2 },
                { text: '梨子', value: 3 },
                { text: '葡萄', value: 4, disabled: true },
            ],
            popupAlignments: ['top-left', 'top-middle', 'top-right', 'middle-left', 'middle-middle', 'middle-right', 'bottom-left', 'bottom-middle', 'bottom-right'],
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            cate: null,
            cates: [],
            badgeCount: 1,
            dotOnly: true,
            startTime: new Date()
        }
    },
    methods: {
        testClick(a) {
            console.log(a.name)
        },
        getParents(item) {
            let parents = []
            let parent = this.cateItems.find(a => a.id == item.parentId)
            if (parent) {
                parents.unshift(parent)
                let parentParents = this.getParents(parent)
                parents.unshift(...parentParents)
            }
            return parents
        }
    }
}
</script>